#@web_layout?()
#define css()
<link rel="stylesheet" type="text/css" href="#(contextPath)/assets/front/web/css/layer.css?#(getUUID())" />
<link rel="stylesheet" type="text/css" href="#(contextPath)/assets/front/web/css/main.css?#(getUUID())" />
<link rel="stylesheet" type="text/css" href="#(contextPath)/assets/admin/js/fancybox/source/jquery.fancybox.css?v=2.1.2" />
<style>
	.m-select {
	    margin-top: 30px;
	    width: 100%;
	    display: flex;
	    flex-direction: row;
	    border: 1px solid #dedede;
	}
	.u-select-option-active {
	    background-color: #63bcc0;
	    color: #fff;
	}
</style>
#end
#define content()
<div class="c-article" style="min-height:100%;">
    <div class="g-info">
    	<div class="m-select" style="margin-top:20px;">
            <div data-status="0" class="u-select-option u-select-option-active" id="wxPay">微信充值</div>
            <div data-status="1" class="u-select-option" id="publicPay">对公转账</div>
        </div>
        <div class="m-panel" style="border-radius: 2px" id="wxPannel">
            <div class="m-row">
                <div class="u-row-title"></div>
            </div>
            <div class="m-row">
                <div class="u-row-title">帐户当前余额:</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                        #(salary.fee()??'0')
                    </div>
                </div>
            </div>
            <div class="m-row">
                <div class="u-row-title">充值用途:</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                        <input value="象漾账户充值" readonly="readonly" class="u-row-cell-input" id="featrue" maxlength="15" />
                    </div>
                </div>
            </div>
            <div class="m-row">
                <div class="u-row-title">充值金额(单位:元):</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                        <input  placeholder="请输入充值金额，最小充值金额￥1" class="u-row-cell-input" id="total_fee" maxlength="15" />
                    </div>
                </div>
            </div>
            <div class="m-row">
                <div class="task-next" id="payBtn">点我生成微信付款码</div>
            </div>
        </div>
    	<div class="m-panel" style="border-radius: 2px;display:none" id="publicPannel">
    		<div class="m-row">
                <div class="u-row-title"></div>
            </div>
            <div class="m-row">
                <div class="u-row-title">开户名称：</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                       杭州铂数网络技术有限公司
                    </div>
                </div>
            </div>    
            <div class="m-row">
                <div class="u-row-title">开户银行：</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                       中国农业银行杭州市滨江支行
                    </div>
                </div>
            </div>
            <div class="m-row">
                <div class="u-row-title">汇款帐号：</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                       19045101040044425
                    </div>
                </div>
           </div>
            <div class="m-row">
                <div class="u-row-title">联系电话：</div>
                <div class="u-row-box">
                    <div class="u-row-box-input">
                      0571-81396102
                    </div>
                </div>
            </div>
    	  </div>
    </div>
</div>

<div id="payCode"  style="width:450px;text-align: center; display:none">
	<a href="#payCode" class="fancybox" id="payCodeTrigger" style="display:none">付款码</a>
	<p style="color:red">象漾账户充值微信付款码</p>
	<div id="qrcode"></div>
	<p style="color:grey">打开微信客户端扫二维码付款</p>
	<p style="color:red" id="result">等待付款...</p>
</div>

#end
#define script()
<script type="text/javascript" src="#(contextPath)/assets/admin/js/fancybox/lib/jquery-1.8.2.min.js"></script>
<script src="#(contextPath)/assets/front/web/script/pay/jquery.qrcode.js"></script>
<script type="text/javascript" src="#(contextPath)/assets/admin/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="#(contextPath)/assets/admin/js/fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script type="text/javascript">
    var contextPath="#(contextPath)";
    var doaminurl = "#(domain)";
</script>

<script>
	var ref="";
	function queryOrderStatus(id){
		$.ajax({
	        type:"POST",
	        url:"/pay/queryOrderStatus",
	        data:{"id":id},
	        datatype: "JSON",
	        success:function(data){
	        	if(data.result){
	        		$("#result").html(data.msg+",3秒后为你刷新页面");
	        		clearInterval(ref);
	        		window.setTimeout("window.location.reload()",3000);
	        		return;
	        	}else{
	        		      
	        	}
	        	
	        },
		});
	}
	
		$(document).ready(function(){
			
			$("#wxPay").on('click',function(){
				$("#publicPay").removeClass("u-select-option-active")
				$("#wxPay").addClass("u-select-option-active")
				$("#publicPannel").hide();
				$("#wxPannel").show();
			});
			
			$("#publicPay").on('click',function(){
				$("#wxPay").removeClass("u-select-option-active")
				$("#publicPay").addClass("u-select-option-active")
				$("#wxPannel").hide();
				$("#publicPannel").show();
			})
			
			
		$('.fancybox').fancybox();
		
		$("#payBtn").click(function(){
			var reg = /^[0-9]*[1-9][0-9]*$/;
			//输入的充值金额必须是整数并且大于1元
			var total_fee = $("#total_fee").val();
			if(!reg.test(total_fee)){
				layer.alert("请输入正确的充值金额,必须为整数，如:1000");
				return;
		    }
			
			if(parseInt(total_fee)<1){
				layer.alert("充值金额最小为1元");
				return;
		    }
			
			layer.confirm("确定需要为当前帐号进行充值操作么？", {
	            btn: ['确定充值','放弃充值'] //按钮
	        }, function(){
	        	layer.closeAll('dialog');
	        	$("#payCodeTrigger").trigger("click");
	        	$.ajax({
		            type:"POST",
		            url:"#(contextPath)/pay/wxQrCode",
		            data:{name:$("#featrue").val(),total_fee:$("#total_fee").val()},
		            datatype: "JSON",
		            success:function(data){
		            	if(data.result){
		            		var id =data.data.id;
		            		var url =data.data.qrCodeUrl;
		            		$("#payCodeTrigger").trigger("click");
			            	$('#qrcode').html("");
			            	$('#qrcode').qrcode({
			            		width: 150,
			            		height: 150,
			            		text: url
			            	});  
			            	ref = window.setInterval("queryOrderStatus("+id+")",1000); 
		            	}else{
		            		layer.alert(data.msg);        
		            	}
		            },
				});
	        },function(){
	        	
	        });
        	
			
		})
	})
</script>

#end